extends layout

mixin gettingStarted
  p Read the <a href="/getting-started">Getting Started</a> guide for instructions on using Grunt in your projects. Once you've done that, check out a <a href="/sample-gruntfile">Sample Gruntfile</a> and learn more about <a href="/configuring-tasks">Configuring Tasks</a>.

block content
  .container
    .row-fluid
      .span9.page
        .hero-unit
          .home-header
            .title-header
              span.grunt-name Grunt
              span.tag-line The JavaScript Task Runner

          .why.pull-left
            h2 Why use a task runner?
            p In one word: automation. The less work you have to do when performing repetitive tasks like minification, compilation, unit testing, linting, etc, the easier your job becomes. After you've configured it through a <a href="/sample-gruntfile">Gruntfile</a>, a task runner can do most of that mundane work for you—and your team—with basically zero effort.

          .why.pull-right
            h2 Why use Grunt?
            p The Grunt ecosystem is huge and it's growing every day. With literally hundreds of plugins to choose from, you can use Grunt to automate just about anything with a minimum of effort. If someone hasn't already built what you need, authoring and publishing your own Grunt plugin to npm is a breeze. See how to <a href="/getting-started">get started</a>.

          .technology
            h2 Available Grunt plugins
            p Many of the tasks you need are already available as Grunt Plugins, and new plugins are published every day. While the <a href="/plugins">plugin listing</a> is more complete, here's a few you may have heard of.
            div
              a.technology(href='https://www.npmjs.com/package/grunt-contrib-coffee')
                img(src='/img/logo-coffeescript.jpg', alt='CoffeeScript', width='175', height='110')
              a.technology(href='https://www.npmjs.com/package/grunt-contrib-handlebars')
                img(src='/img/logo-handlebars.jpg', alt='Handlebars', width='175', height='110')
              a.technology(href='https://www.npmjs.com/package/grunt-contrib-jade')
                img(src='/img/logo-jade.jpg', alt='Jade', width='175', height='110')
              a.technology(href='https://www.npmjs.com/package/grunt-contrib-jshint')
                img(src='/img/logo-jshint.jpg', alt='JSHint', width='175', height='110')
              a.technology(href='https://www.npmjs.com/package/grunt-contrib-less')
                img(src='/img/logo-less.jpg', alt='Less', width='175', height='110')
              a.technology(href='https://www.npmjs.com/package/grunt-contrib-requirejs')
                img(src='/img/logo-requirejs.jpg', alt='Require.js', width='175', height='110')
              a.technology(href='https://www.npmjs.com/package/grunt-contrib-sass')
                img(src='/img/logo-sass.jpg', alt='Sass', width='175', height='110')
              a.technology(href='https://www.npmjs.com/package/grunt-contrib-stylus')
                img(src='/img/logo-sylus.jpg', alt='Stylus', width='175', height='110')

          .grunt-preview
            h2 Here's a preview!
            p While installing grunt is simple, it's slightly more involved to get it running on your project. To see what your effort will win you, take a look at this example output from running Grunt in a <a href="https://github.com/cowboy/jquery-tiny-pubsub">sample project</a>.
            // THX 2 @GF3 4 THE CSS <3!!
            pre.terminal
              span.command-prompt grunt
              | 
              |Running "jshint:gruntfile" (jshint) task
              |<span class="green">&gt;&gt;</span> 1 file lint free.
              | 
              |Running "jshint:src" (jshint) task
              |<span class="green">&gt;&gt;</span> 1 file lint free.
              | 
              |Running "jshint:test" (jshint) task
              |<span class="green">&gt;&gt;</span> 1 file lint free.
              | 
              |Running "qunit:files" (qunit) task
              |Testing test/tiny-pubsub.html....<span class="green">OK</span>
              |<span class="green">&gt;&gt;</span> 4 assertions passed (23ms)
              | 
              |Running "clean:files" (clean) task
              |Cleaning "dist"...<span class="green">OK</span>
              | 
              |Running "concat:dist" (concat) task
              |File "dist/ba-tiny-pubsub.js" created.
              | 
              |Running "uglify:dist" (uglify) task
              |File "dist/ba-tiny-pubsub.min.js" created.
              |Uncompressed size: <span class="green">389</span> bytes.
              |Compressed size: <span class="green">119</span> bytes gzipped (<span class="green">185</span> bytes minified).
              | 
              |<span class="green">Done.</span>
              | 
              |<span class="command-prompt active"><span class="active-prompt"></span></span>

          .who-uses-grunt
            h2 Who uses Grunt?
            p These are just a few companies and projects that are using Grunt. 
              a(href='/who-uses-grunt') See more here.
            div
              a.technology(href='/who-uses-grunt')
                img(src='/img/logo-twitter.jpg', alt='Twitter', width='175', height='110')
              a.technology(href='/who-uses-grunt')
                img(src='/img/logo-jquery.jpg', alt='jQuery', width='175', height='110')
              a.technology(href='/who-uses-grunt')
                img(src='/img/logo-adobe.jpg', alt='Adobe', width='175', height='110')
              a.technology(href='/who-uses-grunt')
                img(src='/img/logo-modernizr.jpg', alt='Modernizr', width='175', height='110')
              a.technology(href='/who-uses-grunt')
                img(src='/img/logo-bocoup.jpg', alt='Bocoup', width='175', height='110')
              a.technology(href='/who-uses-grunt')
                img(src='/img/logo-fg.jpg', alt='Filament Group', width='175', height='110')
              a.technology(href='/who-uses-grunt')
                img(src='/img/logo-saucelabs.jpg', alt='Sauce Labs', width='175', height='110')
              a.technology(href='/who-uses-grunt')
                img(src='/img/logo-bitovi.jpg', alt='Bitovi', width='175', height='110')

          .how-get-started
            h2 How do I get started?
            +gettingStarted

      .span3
        .well.sidebar-nav
          .latest-version
            h3 Latest Version
            ul
              li Stable:
                = ' '
                a(href='https://www.npmjs.org/package/grunt') v1.1.0
                span  (npm)
              li Development:
                = ' '
                a(href='https://github.com/gruntjs/grunt') master
                span  (GitHub)

          include blocks/advertisements

          .latest-news
            h3 Latest News
            ul
              each article, i in news
                if i < 3
                  li
                    a(href='/blog/' + article.url)
                      span.title= article.title
                      span.date= article.postDate

          .getting-started
            h3 Getting Started
            +gettingStarted

          .social
            a.github(href='https://github.com/gruntjs/', title='Grunt on GitHub')
              span.icon-github
            a.twitter(href='https://twitter.com/gruntjs/', title='Grunt on Twitter')
              span.icon-twitter
            a.feed(href='/rss', title='Grunt blog RSS feed')
              span.icon-rss
